<template>
  <el-dialog
    v-model="visible"
    :title="!isEdit ? $t('live.view') : $t('groups.edit')"
    :close-on-click-modal="false"
    class="dialog-add-or-update"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="80px"
      @submit.prevent
      @keyup.enter="onSubmit()"
    >
      <div v-if="!isEdit">
        <el-form-item
          :label="$t('productComm.content')"
          prop="userName"
        >
          <el-input
            v-model="dataForm.content"
            class="_textarea"
            type="textarea"
            :readonly="true"
            :disabled="!isEdit"
            maxlength="500"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          :label="$t('productComm.pics')"
          prop="userName"
        >
          <div v-if="!dataForm.pics">
            {{ $t('productComm.no') }}
          </div>
          <!-- 子组件imgs-upload -->
          <imgs-upload
            v-model="dataForm.pics"
            :disabled="true"
            :modal="false"
            :use-prefix="false"
            :prompt="false"
          />
        </el-form-item>
        <el-form-item
          :label="$t('productComm.recTime')"
          prop="userName"
        >
          <el-input
            v-model="dataForm.recTime"
            :readonly="true"
            :disabled="!isEdit"
          />
        </el-form-item>
        <el-form-item
          :label="$t('productComm.replyTime')"
          prop="userName"
          :readonly="true"
        >
          <el-input
            v-model="dataForm.replyTime"
            :readonly="true"
            :disabled="!isEdit"
          />
        </el-form-item>
        <el-form-item
          :label="$t('productComm.postip')"
          prop="userName"
        >
          <el-input
            v-model="dataForm.postip"
            :readonly="true"
            :disabled="!isEdit"
          />
        </el-form-item>
        <el-form-item
          :label="$t('productComm.score')"
          prop="score"
        >
          <el-input
            v-model="dataForm.score"
            :readonly="true"
            :disabled="!isEdit"
          />
        </el-form-item>

        <el-form-item
          :label="$t('productComm.isAnonymous')"
          prop="isAnonymous"
        >
          <el-radio-group
            v-model="dataForm.isAnonymous"
            :disabled="true"
          >
            <el-radio :label="1">
              {{ $t('publics.yes') }}
            </el-radio>
            <el-radio :label="0">
              {{ $t('publics.no') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <el-form-item
        :label="$t('productComm.replyContent')"
        prop="replyContent"
      >
        <el-input
          v-model="dataForm.replyContent"
          class="_textarea"
          type="textarea"
          :readonly="!isEdit"
          :disabled="!isEdit"
          rows="6"
          :autosize="{ minRows: 2, maxRows: 6 }"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('crud.filter.cancelBtn') }}
        </div>
        <div
          v-if="isEdit"
          class="default-btn primary-btn"
          @click="onSubmit()"
        >
          {{ $t('crud.filter.submitBtn') }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataForm = ref({
  prodCommId: null,
  prodId: null,
  orderItemId: null,
  userId: null,
  content: null,
  replyContent: '',
  recTime: null,
  replyTime: null,
  replySts: null,
  postip: null,
  score: null,
  usefulCounts: null,
  photoJson: null,
  isAnonymous: null,
  status: 1
})
watch(visible, newVal => {
  if (!newVal) {
    dataForm.value.pics = ''
  }
})
const isEdit = ref(false)
const dataFormRef = ref(null)
const init = (prodCommId, aEdit) => {
  isEdit.value = aEdit
  dataForm.value.prodCommId = prodCommId || 0
  visible.value = true
  nextTick(() => {
    dataFormRef.value.resetFields()
    if (dataForm.value.prodCommId) {
      http({
        url: http.adornUrl('/prod/prodComm/info/' + dataForm.value.prodCommId),
        method: 'get',
        params: http.adornParams()
      }).then(({ data }) => {
        dataForm.value = data
      })
    }
  })
}
// 表单提交
const onSubmit = () => {
  dataFormRef.value.validate(valid => {
    if (valid) {
      http({
        url: http.adornUrl('/prod/prodComm'),
        method: dataForm.value.prodCommId ? 'put' : 'post',
        data: http.adornData(dataForm.value)
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList')
          }
        })
      })
    }
  })
}
defineExpose({ init })
</script>

<style lang="scss" scoped>
.dialog-add-or-update {
  ._textarea {
    :deep(.el-input__count) {
      bottom: -33px;
    }
  }
}
</style>
